<template>
  <div
    class="applicationcode"
    @click="goback"
  >
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    /> -->
    <div class="wrapper">
      <div class="chart-head">{{ chartTitle }}</div>
      <div class="statistics">
        <div class="statistics-item">
          <div>新增本土确诊</div>
          <div style="color:#9b7f5d ;">{{ statisticsList .add }}</div>
        </div>
        <div class="statistics-item">
          <div>新增本土无症状</div>
          <div style="color:bisque ;"> {{ statisticsList .asymptomatic }}</div>
        </div>
        <div class="statistics-item">
          <div>现存确诊</div>
          <div style="color:plum ;">{{ statisticsList .exist }}</div>
        </div>
        <div class="statistics-item">
          <div>累计确诊</div>
          <div style="color:red;">{{ statisticsList .all }}</div>
        </div>
        <div class="statistics-item">
          <div>累计治愈</div>
          <div style="color:green ;">{{ statisticsList .cured }}</div>
        </div>
        <div class="statistics-item">
          <div>累计死亡</div>
          <div style="color:gray ;">{{ statisticsList .death }}</div>
        </div>
        <div class="statistics-item">
          <div>高风险地区</div>
          <div style="color:orangered ;">{{ statisticsList .hight }}</div>
        </div>
        <div class="statistics-item">
          <div>中风险地区</div>
          <div style="color:orange ;">{{ statisticsList .low }}</div>
        </div>
      </div>
      <div
        class="cartTable"
      >
        <table v-if="tableData.length>0" width="100%" border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>城市(区)</th>
              <th>省区市</th>
              <th>新增</th>
              <th>现有确诊</th>
              <th>详细情况</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in tableData" :key="item">
              <td>{{ item.province }}</td>
              <td>{{ item.city }}</td>
              <td>{{ item.add }}</td>
              <td>{{ item.define }}</td>
              <td>查看更多 <span style="color:#4989f2;"> > </span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</template>

<script>
import $api from '@/api/index'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      NewAddData: [],
      countData: [],
      chartTitle: '近期省区市本土病例',
      tableData: [{
        province: '重庆',
        city: '重庆',
        add: 20,
        define: 300
      }, {
        province: '重庆',
        city: '重庆',
        add: 20,
        define: 300
      }, {
        province: '重庆',
        city: '重庆',
        add: 20,
        define: 300
      }, {
        province: '重庆',
        city: '重庆',
        add: 20,
        define: 300
      }],
      statisticsList: {
        add: 12,
        asymptomatic: 24,
        exist: 60,
        all: 130,
        cured: 60,
        death: 10,
        hight: 2,
        low: 4
      }
    }
  },
  computed: {
    // ...mapGetters([
    //   'reportId'
    // ])
  },
  beforeCreate() {
    // this.$dd.showTitleBar()
  },
  mounted() {
    // this.drawLine1()
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
    width:100%;
    background-color: #F7FBFF;
    height:100%;
    padding: 28px;
    box-sizing: border-box;
}
.wrapper{
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 6px 12px 2px rgba(39,138,210,0.15);
    height: 100%;
    .chart-head{
      height: 92px;
      padding: 24px;
      text-align:center;
      font-size: 32px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #4989F2;
      box-sizing: border-box;
      box-shadow: 0px 12px 12px 2px rgba(101,159,255,0.12);
    }
    .statistics{
      margin-top: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .statistics-item{
        height: 160px;
        width: 200px;
        text-align: center;
        padding: 24px 10px;
        box-sizing: border-box;
        div{
          &:nth-child(1){
            font-size: 12px;
            margin-bottom: 22px;
          }
          &:nth-child(2){
            font-size: 36px;
            font-weight: bold;
          }
        }
      }

    }
  .cartTable{
      margin-top: 10px;
      // width:calc(100% + 400px);
      width:100%;
      height:calc(100% - 92px);
      margin-top: 10px;
      // border-collapse: collapse;
      // border: 1px solid #3842751a;
      // border-bottom: none;
      // position: relative;
      table{
        thead{
          position: sticky;
          top: 0px;
          left: 0px;
        }
        tbody{
          tr:nth-child(2n){
            background-color: #f7fbff;
          }
        }
        th{
          text-align: left;
          padding-left:25px;
          padding-right:25px;
          height: 50px;
          font-size: 14px;
          font-weight: bold;
          color: #4989f2;
          background-color: #4989f220 !important;
          // box-shadow: 0px 3px 3px 1px #3842751a;
          // border-bottom: 1px solid #3842751a;
          // position: sticky;
          // z-index: 2;
        }
        td{
          text-align: center;
          padding-right:25px;
          padding-left:25px;
          font-size: 12px;
          font-weight: 400;
          height: 50px;
          color: #252631;
          // border-bottom: 1px solid #3842751a;
        }
    }
    }
}
</style>
